<template>
	<view class="listmenu" :style="'padding:' + mydata.padding.top / 2 + 'px ' + mydata.padding.lr / 2 + 'px ' + mydata.padding.bottom / 2 + 'px '">
		<view
			class="containers"
			:style="
				'background:' +
					mydata.bgcolor +
					';border-radius:' +
					mydata.radius.top / 2 +
					'px ' +
					mydata.radius.top / 2 +
					'px ' +
					mydata.radius.bottom / 2 +
					'px ' +
					mydata.radius.bottom / 2 +
					'px '
			"
		>
			<view class="bg">
				<vcustomer :linkdata="item.linkdata" 
				:style="mydata.list.length == 1 ? 'border-bottom:none' : ''"
				  v-for="(item, i) in mydata.list">
				<view class="menu-item"  :style="'background:' +mydata.bgcolor" v-bind:class="mydata.list.length == 1 ? 'noborder' : ''">
					<text class="lefttit">
						<text class="icon el-icon-menu iconfont" v-bind:class="item.icon" :style="'color:' + mydata.left.iconcolor"></text>
						<text class="tit" :style="'color:' + mydata.left.textcolor">{{ item.left_text }}</text>
					</text>
					<text class="righttit" :style="'color:' + mydata.right.textcolor">
						<text class="tit">{{ item.right_text }}</text>
						<text class="icon iconfont " v-bind:class="mydata.right.icon" :style="'color:' + mydata.right.iconcolor"></text>
					</text>
				</view>
				
				</vcustomer>
				<!-- <view  :key="i">
				
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	data() {
		return {};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	methods: {}
};
</script>

<style lang="scss">
.listmenu {
	padding: 16rpx 24rpx 0;

	.containers {
		padding-left: 24rpx;
		border-radius: 12rpx;
		    overflow: hidden;
		.bg {
			width: 100%;
			display: flex;
			position: relative;
			box-sizing: border-box;
			flex-direction: column;

			.lefttit {
				display: flex;
				font-size: 28rpx;
				justify-content: center;
				align-items: center;

				.icon {
					margin: auto;
					font-size: 36rpx;
					line-height: 42rpx;
					height: 42rpx;
					width: 42rpx;
				}

				.tit {
					font-family: PingFang SC;
					font-style: normal;
					font-size: 28rpx;
					color: #212121;
					margin-left: 8rpx;
					line-height: 42rpx;
				}
			}

			.righttit {
				position: absolute;
				cursor: pointer;
				right: 24rpx;
				display: flex;
				top: 0;
				bottom: 0;
				margin: auto;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 500;
				color: #969696;

				.tit {
					font-size: 24rpx;
				}

				.icon {
					font-size: 32rpx;
					margin-top: 2rpx;
				}
			}

			.menu-item {
				width: 100%;
				display: flex;
				position: relative;
				box-sizing: border-box;
				height: 96rpx;
				border-bottom: 1rpx solid #eee;
				&.noborder{
					border-bottom: none;
				}
			}
		}
	}
}
</style>
